<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>待对账订单</title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="./css/tobeBillOrder.css">
        <script src="./js/cookie.js"></script>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="box" v-cloak>
            <header>
                <div class="headerSelect">
                    <el-select v-model.trim="value" placeholder="请选择">
                        <el-option
                            v-for="item in platformData"
                            :key="item.ID"
                            :label="item.COMPNAME"
                            :value="item.COMPNAME">
                        </el-option>
                    </el-select>
                </div>
                <div class="headerOrder">
                    <el-input v-model.trim="input1" placeholder="订单号/手机号"></el-input>
                </div>
                <div class="headerDate">
                    <span class="demonstration" style="font-size:14px;">起始时间</span>
                    <el-date-picker
                        v-model.trim="value4"
                        type="datetimerange"
                        :picker-options="pickerOptions2"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                    </el-date-picker>
                </div>
                <div class="headerBtn1" @click="search">
                    <el-button>搜索</el-button>
                </div>
                <div class="headerBtn3">
                    <el-button @click="excel">导出</el-button>
                </div>
                <div class="headerBtn2" @click="startBill()">
                    <el-button>发起对账</el-button>
                </div>
            </header>
            <div class="contents" style="text-align:center;margin-top:20px;">
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="select"
                        label="选择"
                        width="50">
                        <template slot-scope="scope">
                            <input type="checkbox" style="width:15px;height:15px;" @click="changeCheck(scope.row.ORDERID)"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sort"
                        label="序号"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="PLATFORMNAME"
                        label="合作平台">
                    </el-table-column>
                    <el-table-column
                        prop="ORDERNO"
                        label="订单号码">
                        <template slot-scope="scope">
                            <p style="color:#6181d0;">{{scope.row.ORDERNO}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="SHOPNAME"
                        label="店名">
                    </el-table-column>
                    <el-table-column
                        prop="CREATETIME"
                        label="订单日期"
                        width="140"
                        >
                        <template slot-scope="scope">
                            {{scope.row.CREATETIME | format}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="STATUS"
                        label="订单状态">
                        <!--订单状态 看文档5.18 getOrderDetail-->
                        <!--STATUS,PAY_STATUS依次对应1,0-待确认/待报价 2,0-待付款 2,1-待服务 3,1-待评价 4,1-已完成 5-已取消 6-已过期-->
                        <template slot-scope="scope">
                            <span v-if="scope.row.STATUS==1&&scope.row.PAY_STATUS==0" style="color:#F83F3F">待确认</span>
                            <span v-else-if="scope.row.STATUS==2&&scope.row.PAY_STATUS==0" style="color:#F83F3F">待付款</span>
                            <span v-else-if="scope.row.STATUS==2&&scope.row.PAY_STATUS==1" style="color:#F83F3F">待服务</span>
                            <span v-else-if="scope.row.STATUS==3&&scope.row.PAY_STATUS==1" style="color:#F83F3F">待评价</span>
                            <span v-else-if="scope.row.STATUS==4&&scope.row.PAY_STATUS==1" style="color:#46CC22">已完成</span>
                            <span v-else-if="scope.row.STATUS==5" style="color:#666">已取消</span>
                            <span v-else-if="scope.row.STATUS==6" style="color:#46CC22">已过期</span>
                            <span v-else>—</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="TOTALFEE"
                        label="订单金额">
                    </el-table-column>
                    <el-table-column
                        prop="操作"
                        label="订单详情">
                        <template slot-scope="scope">
                            <p style="color:#6181d0;cursor:pointer;" class="oDetail" @click="goDetail(scope.row.ORDERID)">订单详情</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <footer style="position:relative;">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="10"
                    layout="total,prev,pager,next,jumper"
                    :total="totalNum">
                </el-pagination>
            </footer>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
var vm = new Vue({
    el: '#box',
    data: {
        //getIp1: 'http://192.168.0.180:8085/CARSERV', //测试环境ip
        getIp1: 'http://carnt.carnettong.com:8088/CARSERV', //正式环境ip
        //getIp1: 'http://121.40.78.200:88/CARSERV',
        loading: true, //true加载中 false加载完成
        pickerOptions2: {
            shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
        },
        value: '', //选择下拉框的值
        value4: '', //起始、结束时间的数组
        input1: '', //订单/手机号
        platformData: [], //所有合作平台数据
        page: 1, //分页数
        totalNum: 0, //总订单数
        tableData: [], //待对账所有数据
        currentPage: 1, //当前分页数
        pageSum: 7, //--------每页显示的数目--------
    },
    created: function () {
        //所有平台列表
        this.$http.post(this.getIp1 + '/PlatformUser/getPuList.action', {COMPNAME: ''}, {emulateJSON: true}).then(
                res => {
                    if (res.body.STATUC_CODE == 1) {
                        this.platformData = res.body.PLATFORMUSERARR;
                        //在下拉框中添加 全部
                        obj.COMPNAME = '全部';
                        obj.ID = '3';
                        this.platformData.unshift(obj);
                    }
                }, err => console.log(err)
        );
        //待对账列表
        let obj = {};
        obj.PLATFORMNAME = '';
        obj.LIKESTRING = '';
        obj.STARTTIME = '';
        obj.ENDTIME = '';
        obj.PAGE_NO = this.page;
        this.$http.post(this.getIp1 + '/PlatformBill/getWaitBillOrderList.action', obj, {emulateJSON: true}).then(
                res => {
                    if (res.body.STATUC_CODE == 1) {
                        this.totalNum = res.body.TOTAL_NUM;
                        this.tableData = res.body.WAITBILLARR;
                        for (let i = 0; i < this.tableData.length; i++) {
                            this.$set(this.tableData[i], 'flag', 0);//0-未选中 1-已选择
                        }
                        this.loading = false;
                    }
                }, err => console.log(err)
        );

    },
    computed: {
        orderList() {
            if (this.tableData) {
                return this.tableData.slice(this.pageSum * (this.currentPage - 1), this.pageSum * this.currentPage);
            }
        }
    },
    methods: {
        //选中checkbox
        changeCheck(id) {
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].ORDERID == id) {
                    if (this.tableData[i].flag == 0) {
                        this.tableData[i].flag = 1;
                    } else {
                        this.tableData[i].flag = 0;
                    }
                }
            }
        },
        //发起对账
        startBill() {
            let order_ids = '';
            let name = '';
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].flag == 1) {
                    if (this.tableData[i].ISBILL == 0) {
                        this.$alert('已取消的订单不可发起对账!', '提示');
                        return;
                    }
                    name += this.tableData[i].PLATFORMNAME + ',';
                    order_ids += this.tableData[i].ORDERID + ',';
                }
            }
            //拿到订单号字符串
            let order_idss = order_ids.substring(0, order_ids.length - 1);
            if (!!!order_idss) {
                this.$alert('请选择订单!', '提示');
                return;
            }
            //判断是否来自同一平台
            let arr_name = name.substring(0, name.length - 1).split(',');
            let arr_new = [];
            for (let j in arr_name) {
                if (arr_new.indexOf(arr_name[j]) == -1) {
                    arr_new.push(arr_name[j]);
                }
            }
            if (arr_new.length > 1) {
                this.$alert('请选择同一平台发起对账!', '提示');
                return;
            }
            //用cookie传值
            setCookie('order_ids', order_idss);
            location.href = "./startBill.html";
        },
        //搜索
        search() {
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----start*/
            if(this.value4 == null) this.value4 = '';
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----end*/
            $("input[type='checkbox']").attr('checked', false);
            var start = this.value4[0] ? this.formatTimes(this.value4[0]) : '';
            var end = this.value4[0] ? this.formatTimes(this.value4[1]) : '';
            //待对账列表
            let obj = {};
            obj.PLATFORMNAME = this.value == '全部' ? '' : this.value;
            obj.LIKESTRING = this.input1;
            obj.STARTTIME = start;
            obj.ENDTIME = end;
            obj.PAGE_NO = this.page;
            this.$http.post(this.getIp1 + '/PlatformBill/getWaitBillOrderList.action', obj, {emulateJSON: true}).then(
                    res => {
                        if (res.body.STATUC_CODE == 1) {
                            this.totalNum = res.body.TOTAL_NUM;
                            this.tableData = res.body.WAITBILLARR;
                            for (let i = 0; i < this.tableData.length; i++) {
                                this.$set(this.tableData[i], 'flag', 0);//0-未选中 1-已选择
                            }
                        } else {
                            this.totalNum = 0;
                            this.tableData = [];
                        }
                    }, err => console.log(err)
            );
        },
        //切换分页
        handleCurrentChange(val) {
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----start*/
            if(this.value4 == null) this.value4 = '';
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----end*/
            $("input[type='checkbox']").attr('checked', false);
            var start = this.value4[0] ? this.formatTimes(this.value4[0]) : '';
            var end = this.value4[0] ? this.formatTimes(this.value4[1]) : '';
            this.currentPage = val;
            this.page = val;
            //待对账列表
            let obj = {};
            obj.PLATFORMNAME = this.value == '全部' ? '' : this.value;
            obj.LIKESTRING = this.input1;
            obj.STARTTIME = start;
            obj.ENDTIME = end;
            obj.PAGE_NO = this.page;
            this.$http.post(this.getIp1 + '/PlatformBill/getWaitBillOrderList.action', obj, {emulateJSON: true}).then(
                    res => {
                        if (res.body.STATUC_CODE == 1) {
                            this.totalNum = res.body.TOTAL_NUM;
                            this.tableData = res.body.WAITBILLARR;
                            for (let i = 0; i < this.tableData.length; i++) {
                                this.$set(this.tableData[i], 'flag', 0);//0-未选中 1-已选择
                            }
                        }
                    }, err => console.log(err)
            );
        },
        //订单详情
        goDetail(id) {
            location.href = './orderDetail.html?order_id=' + id;
        },
        //格式
        formatTimes(val) {
            var y = new Date(val).getFullYear();
            var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
            var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
            var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
            var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
            return y + "-" + m + "-" + d + " " + h + ":" + ms;
        },
        //导出
        excel() {
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----start*/
            if(this.value4 == null) this.value4 = '';
            /* 这个作用是完善点击叉叉和清除时再搜索的bug    ----end*/
            var start = this.value4[0] ? this.formatTimes(this.value4[0]) : '';
            var end = this.value4[0] ? this.formatTimes(this.value4[1]) : '';
            let str1 = 'PLATFORMNAME=' + this.value;
            let str2 = 'LIKESTRING=' + this.input1;
            let str3 = 'STARTTIME=' + start;
            let str4 = 'ENDTIME=' + end;
            let str5 = 'PAGE_NO=' + this.page;
            let url = this.getIp1 + '/PlatformBill/waitBillOrderListExcel.action?' + str1 + '&' + str2 + '&' + str3 + '&' + str4 + '&' + str5;
            window.open(url);
        },
    },
    filters: {
        format: function (val) {
            var y = new Date(val).getFullYear();
            var m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
            var d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
            var h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
            var ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
            return y + "-" + m + "-" + d + " " + h + ":" + ms;
        }
    },
});
    </script>
</html>
